<template>
  <div ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, watchEffect } from "vue";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
});

// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const xAxisData = ref();
const yAxisData = ref();
const seriesData = ref();
const personHouseDTOS = ref();
import { pxToRem } from "@/utils/index";
xAxisData.value = props.housingSupplyStatsData.xAxisData;
yAxisData.value = props.housingSupplyStatsData.yAxisData;
seriesData.value = props.housingSupplyStatsData.seriesData;
personHouseDTOS.value = props.housingSupplyStatsData.personHouseDTOS;
const colors = props.housingSupplyStatsData.colors;

// echarts初始化渲染
const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line", // 使用线型指示器
          lineStyle: {
            color: "rgba(40,252,255,0.6)", // 指示器颜色
            shadowBlur: 10, // 阴影大小
            shadowColor: "rgba(0, 0, 0, 0.9)", // 阴影颜色
          },
        },
        position: function (point: any) {
          return [point[0] + 10, "10%"]; // 调整X轴偏移量和Y轴位置，使tooltip显示在右侧
        },
        backgroundColor: "rgba(8, 64, 132, 0.9)",
        textStyle: {
          color: "#fff", // 设置文字颜色为白色
          fontSize: pxToRem(18),
        },
        formatter: function (params: any[]) {
          let tooltipContent = ""; // 存储tooltip内容
          personHouseDTOS.value.forEach((item: any) => {
            if (item.years == params[0].name) {
              tooltipContent = `<div class="tooltip-container">
              <div class="tooltip-title">个人拥有住房套数</div>`;
              tooltipContent += `<div class="tooltip-item">
                <div class="tooltip-value">个人拥有房屋：${item.nowTotalHousing}套</div>
                <div>自有率: ${item.ownRate}%</div>
              </div>`;
              tooltipContent += `<div class="tooltip-item">
                <div class="tooltip-value">空置房屋：${item.vacancyHousingNum}套</div>
                <div>空置率: ${item.vacancyHousingRate}%</div>
              </div>`;
              tooltipContent += `<div class="tooltip-item">
                <div class="tooltip-value">居住房屋：${item.unvacancyHousingNum}套</div>
                <div>居住率:${item.unvacancyHousingRate}%</div>
              </div>`;
              tooltipContent += `<div class="tooltip-bottom">个人拥有住房套数同比上年 <span class="${
                item.houseYOY >= 0 ? "tooltip-add" : "tooltip-reduce"
              }">${Math.abs(item.houseYOY)}%</span></div>`;
              tooltipContent += `</div>`;
            }
          });
          return tooltipContent; // 返回tooltip内容
        },
      },
      legend: {
        show: false,
        textStyle: {
          color: "#",
          fontSize: pxToRem(12),
        },
      },
      grid: {
        left: "",
        right: "3%",
        bottom: "3%",
        top: "21%",
        containLabel: true,
      },
      xAxis: {
        boundaryGap: true,
        data: xAxisData.value,
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#FFFFFF",
            fontSize: pxToRem(12),
          },
        },
      },
      yAxis: yAxisData.value.map((item: any) => ({
        type: "value",
        name: item,
        nameTextStyle: {
          color: "#959699",
          fontSize: pxToRem(12),
        },
        splitLine: {
          show: item == "同比上年(%)" ? false : true,
          lineStyle: {
            color: "#31679C",
            type: "dashed",
          },
        },
        axisLabel: {
          formatter: "{value}",
          color: "#959699",
          fontSize: pxToRem(12),
        },
      })),
      series: [
        {
          name: "空置房屋",
          type: "bar",
          stack: "account",
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: colors[0].a,
                },
                {
                  offset: 1,
                  color: colors[0].b,
                },
              ],
            },
          },
          data: seriesData.value[1],
        },
        {
          name: "居住房屋",
          type: "bar",
          stack: "account",
          barMaxWidth: 18,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors[1].a },
              { offset: 1, color: colors[1].a },
            ]),
          },
          data: seriesData.value[0],
        },
        {
          name: "同比上年",
          type: "line",
          symbol: "none",
          smooth: true,
          yAxisIndex: 1,
          data: seriesData.value[2],
          itemStyle: {
            normal: {
              color: colors[2].a,
            },
          },
        },
      ],
    };
    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  props.housingSupplyStatsData;
  xAxisData.value = props.housingSupplyStatsData.xAxisData;
  yAxisData.value = props.housingSupplyStatsData.yAxisData;
  seriesData.value = props.housingSupplyStatsData.seriesData;
  personHouseDTOS.value = props.housingSupplyStatsData.personHouseDTOS;
  getEchart();
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
